<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

    <script>
        $.fn.linkselect = function (options) {
            var select = this;//获取当前select对象
            var url = options.url;//获取数据的链接
            console.log(url)
            var value = options.value;//初始化需要选中的数据
            var now = options.now;//当前select的级别
            var param = options.param;//传向后台的参数
            var level = options.level;//一共有多少级select
            var preid = options.preid;//当前select的id的前缀
            $.get(url[now], {param: param}, function (result) {
                select.find("option").remove();
                select.append("<option value=''>请选择</option>");
                for (var n = 0; n < result.length; n++) {
                    if(n==0) {
                        select.append("<option value='" + result[n].CODE + "' selected>" + result[n].NAME + "</option>");
                    }else {
                        select.append("<option value='" + result[n].CODE + "'>" + result[n].NAME + "</option>");
                    }
                }
                //onchange事件，改变后面select的值
                select.change(function () {
                    var thisId = select.attr("id").split("_")
                    var param = select.val();
                    console.log("获取改变的值是:"+param)
                    var nextId = parseInt(thisId[1]) + 1;
                    if (nextId <= level) {
                        var next = $("#" + preid + "_" + nextId);
                        next.find("option").remove();
                        $("#" + preid + "_" + nextId).linkselect({
                            url: url,
                            value: value,
                            level: level,
                            now: nextId,
                            param: param,
                            preid: preid
                        });
                        next.change();
                    }
                });
                // //设置后面select的值
                select.change();
            });
        };
    </script>
</head>
<body>
<div class="">

    <div class="form-group col-md-3">
        <label class="control-label" style="float:left"><h4> 省份：</h4></label>

        <div class="col-xs-8">
            <select class="form-control" id="select_1" name="dbId" class="form-control">
            </select>
        </div>
    </div>
    <div class="form-group col-md-3">
        <label class="control-label" style="float:left"><h4> 地级市：</h4></label>

        <div class="col-xs-8">
            <select class="form-control" id="select_2" name="dbId" class="form-control">
            </select>
        </div>
    </div>
    <div class="form-group col-md-3">
        <label class="control-label" style="float:left"><h4> 县：</h4></label>

        <div class="col-xs-8">
            <select class="form-control" id="select_3" name="dbId" class="form-control">
            </select>
        </div>
    </div>
</div>
<script>
    $("#select_1").linkselect({
        url: {"1": "a.json", "2": "b.json", "3": "c.json"},//每一级从后端获取数据的地址
        value: {"CODE": "10001"},//每一级select的默认value,此时表示第一级选中北京
        level: 3,//表示一共拥有几级联动，三级联动就写3，四级就写4，一次类推
        now: 1,//固定值，表示当前为第几级
        param: 0,//参数值，传向后端的参数，0表示获取所有的省份
        preid: "select"//所有select的id前缀都应该是一样的，后面加上_和级别数
    });
</script>
</body>
</html>